<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>My Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="This is my first blog.">
<meta property="og:type" content="website">
<meta property="og:title" content="My Blog">
<meta property="og:url" content="http://yoursite.com/page/3/index.html">
<meta property="og:site_name" content="My Blog">
<meta property="og:description" content="This is my first blog.">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Alanisia">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="My Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">My Blog</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">我的博客 -- 记录编程过程中所遇到的问题与总结</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="搜索"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-webpack" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/webpack/" class="article-date">
  <time datetime="2021-01-25T17:17:50.000Z" itemprop="datePublished">2021-01-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/webpack/">Webpack</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><p>全局安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install webpack -g</span><br><span class="line">sudo npm install webpack-cli -g</span><br></pre></td></tr></table></figure>

<p>项目中安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack --save-dev</span><br><span class="line">yarn add -D webpack</span><br></pre></td></tr></table></figure>

<h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><p>命令行执行<code>webpack</code>命令，可以带参数。</p>
<p>参数配置过多也可将配置写在配置文件<code>webpack.config.js</code>上，webpack会读取工作目录下的该配置文件。</p>
<h2 id="配置文件webpack-config-js"><a href="#配置文件webpack-config-js" class="headerlink" title="配置文件webpack.config.js"></a>配置文件webpack.config.js</h2><p>下面是一份简单的配置：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: __dirname + <span class="string">'/src/index.js'</span>,</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: __dirname + <span class="string">'/build'</span>,</span><br><span class="line">        filename: <span class="string">'bundle.js'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    target: <span class="string">'node'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>其中，<code>__dirname</code>变量表示项目根目录，<code>entry</code>选项为配置程序入口文件，<code>output</code>选项为打包后的输出配置，<code>output</code>选项中的<code>path</code>项表示输出位置，<code>filename</code>项表示输出的文件名，项目所有的JS代码都会被打进这个文件中。<code>mode</code>选项表示开发模式，<code>target</code>选项表示目标平台，如果项目中使用了node.js的API，则需要写上<code>target: &#39;node&#39;</code>这一行配置，否则webpack将会报错（找不到module）。</p>
<h2 id="Webpack-dev-server"><a href="#Webpack-dev-server" class="headerlink" title="Webpack-dev-server"></a>Webpack-dev-server</h2><p>安装：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add -D webpack-dev-server</span><br></pre></td></tr></table></figure>

<p>配置：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    devServer: &#123;</span><br><span class="line">        open: <span class="literal">true</span>, <span class="comment">// 打开浏览器</span></span><br><span class="line">        port: <span class="number">8080</span>, <span class="comment">// 端口设置</span></span><br><span class="line">        host: <span class="string">"localhost"</span>, <span class="comment">// 主机设置</span></span><br><span class="line">        progress: <span class="literal">true</span>, <span class="comment">// 打包进度条显示</span></span><br><span class="line">        hot: <span class="literal">true</span>, <span class="comment">// 热重载</span></span><br><span class="line">        contentBase: <span class="string">''</span>, <span class="comment">// 主页(index.html)所在之目录</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(), <span class="comment">// 热重载所需之插件</span></span><br><span class="line">    ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="Webpack插件"><a href="#Webpack插件" class="headerlink" title="Webpack插件"></a>Webpack插件</h2><h4 id="loaders"><a href="#loaders" class="headerlink" title="loaders"></a>loaders</h4><ul>
<li>babel-loader：编译JS/JSX</li>
<li>style-loader, css-loader：处理CSS文件<ul>
<li>css-loader：加载CSS文件</li>
<li>style-loader：将CSS文件通过<code>&lt;style&gt;</code>标签嵌入HTML中</li>
</ul>
</li>
<li>json-loader：解析JSON</li>
<li>html-loader：解析HTML</li>
<li>file-loader, url-loader：解析图片等静态资源文件</li>
</ul>
<h4 id="plugins"><a href="#plugins" class="headerlink" title="plugins"></a>plugins</h4><ul>
<li><p><code>webpack.ProvidePlugin</code></p>
</li>
<li><p><code>webpack.HotModuleReplacementPlugin</code></p>
</li>
<li><p><code>UglifyJsPlugin</code> 丑化JS插件</p>
<p>安装：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add -D uglifyjs-webpack-plugin</span><br></pre></td></tr></table></figure>

<p>使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	plugins: [</span><br><span class="line">		<span class="keyword">new</span> UglifyJsPlugin(),</span><br><span class="line">	],</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>HtmlWebpackPlugin</code> HTML打包插件</p>
<p>安装：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add -D html-webpack-plugin</span><br></pre></td></tr></table></figure>

<p>使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	plugins: [</span><br><span class="line">        <span class="comment">// 每一个欲打包之HTML文件都必须配置一个HtmlWebpackPlugin(一个插件对应一个HTML文件)</span></span><br><span class="line">		<span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'index.html'</span>, <span class="comment">// 打包后的文件名</span></span><br><span class="line">            template: <span class="string">'./src/index.html'</span>, <span class="comment">// 欲打包之文件</span></span><br><span class="line">            chunk: [<span class="string">'index'</span>, <span class="string">'nav'</span>], <span class="comment">// 欲插入打包后HTML文件的JS文件</span></span><br><span class="line">		&#125;),</span><br><span class="line">	],</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>MiniCssExtractPlugin</code> CSS打包插件</p>
<p>安装：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add -D mini-css-extract-plugin</span><br></pre></td></tr></table></figure>

<p>使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">	plugins: [</span><br><span class="line">		<span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'css/styles.css'</span> <span class="comment">// 欲打包之CSS文件</span></span><br><span class="line">        &#125;),</span><br><span class="line">	],</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="webpack-config-js配置文件示例"><a href="#webpack-config-js配置文件示例" class="headerlink" title="webpack.config.js配置文件示例"></a>webpack.config.js配置文件示例</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>);</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">'mini-css-extract-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> UglifyJsPlugin = <span class="built_in">require</span>(<span class="string">'uglifyjs-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: &#123;</span><br><span class="line">        index: <span class="string">'./src/index.js'</span>,</span><br><span class="line">        common: <span class="string">'./src/scripts/common.js'</span>,</span><br><span class="line">        nav: <span class="string">'./src/scripts/nav.js'</span>,</span><br><span class="line">        comic: <span class="string">'./src/scripts/comic.js'</span>,</span><br><span class="line">        comicContent: <span class="string">'./src/scripts/comic-content.js'</span>,</span><br><span class="line">        images: <span class="string">'./src/scripts/images.js'</span>,</span><br><span class="line">        roles: <span class="string">'./src/scripts/roles.js'</span>,</span><br><span class="line">        rolesIntroduction: <span class="string">'./src/scripts/roles-introduction.js'</span>,</span><br><span class="line">        movie: <span class="string">'./src/scripts/movie.js'</span>,</span><br><span class="line">        movieContent: <span class="string">'./src/scripts/movie-content.js'</span>,</span><br><span class="line">        stories: <span class="string">'./src/scripts/stories.js'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: __dirname + <span class="string">'/dist'</span>,</span><br><span class="line">        filename: <span class="string">`js/[name].js`</span></span><br><span class="line">    &#125;,</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line">    <span class="built_in">module</span>: &#123;</span><br><span class="line">        rules: [</span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                use: &#123;</span><br><span class="line">                    loader: <span class="string">'babel-loader'</span>,</span><br><span class="line">                    options: &#123;</span><br><span class="line">                        presets: [<span class="string">'@babel/preset-env'</span>]</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">                use: <span class="comment">// ['style-loader', 'css-loader']</span></span><br><span class="line">                [&#123;</span><br><span class="line">                    loader: MiniCssExtractPlugin.loader,</span><br><span class="line">                &#125;, &#123;</span><br><span class="line">                    loader: <span class="string">'css-loader'</span></span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="comment">// &#123;</span></span><br><span class="line">            <span class="comment">//     test: /\.(jpeg|jpg|png|gif|svg)$/,</span></span><br><span class="line">            <span class="comment">//     use: [&#123;</span></span><br><span class="line">            <span class="comment">//         loader: 'url-loader',</span></span><br><span class="line">            <span class="comment">//         options: &#123;</span></span><br><span class="line">            <span class="comment">//             limit: 1024 * 50,</span></span><br><span class="line">            <span class="comment">//             // fallback: 'file-loader'</span></span><br><span class="line">            <span class="comment">//         &#125;</span></span><br><span class="line">            <span class="comment">//     &#125;]</span></span><br><span class="line">            <span class="comment">// &#125;,</span></span><br><span class="line">            &#123;</span><br><span class="line">                test: <span class="regexp">/\.html$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">'html-loader'</span></span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">    &#125;,</span><br><span class="line">    devServer: &#123;</span><br><span class="line">        port: <span class="string">'4869'</span>,</span><br><span class="line">        hot: <span class="literal">true</span>,</span><br><span class="line">        contentBase: <span class="string">'src/pages'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    plugins: [</span><br><span class="line">        <span class="keyword">new</span> webpack.HotModuleReplacementPlugin(),</span><br><span class="line">        <span class="keyword">new</span> webpack.ProvidePlugin(&#123;</span><br><span class="line">            $: <span class="string">"jquery"</span>,</span><br><span class="line">            jQuery: <span class="string">"jquery"</span>,</span><br><span class="line">        &#125;),</span><br><span class="line">        <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">            filename: <span class="string">"css/styles.css"</span></span><br><span class="line">        &#125;),</span><br><span class="line">        <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'index.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/index.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'comic-content.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/comic-content.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'comicContent'</span>, <span class="string">'common'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'comic.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/comic.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'comic'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'images.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/images.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'movie-content.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/movie-content.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'movieContent'</span>, <span class="string">'common'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'movie.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/movie.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'movie'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'roles.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/roles.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'roles'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'roles-introduction.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/roles-introduction.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'rolesIntroduction'</span>]</span><br><span class="line">        &#125;), <span class="keyword">new</span> HtmlWebpackPlugin(&#123;</span><br><span class="line">            filename: <span class="string">'stories.html'</span>,</span><br><span class="line">            template: <span class="string">'./src/pages/stories.html'</span>,</span><br><span class="line">            chunks: [<span class="string">'index'</span>, <span class="string">'nav'</span>, <span class="string">'stories'</span>]</span><br><span class="line">        &#125;),</span><br><span class="line">        <span class="keyword">new</span> UglifyJsPlugin()</span><br><span class="line">    ]</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/webpack/" data-id="ckpb8zvlj003hdsvlgrd9flcs" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/nodejs/" rel="tag">nodejs</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-maven-cmd" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/maven-cmd/" class="article-date">
  <time datetime="2021-01-25T17:17:36.000Z" itemprop="datePublished">2021-01-25</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/maven-cmd/">maven命令</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <ul>
<li>编译</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvn clean compile <span class="comment"># 清除之前target编译文件并重新编译</span></span><br></pre></td></tr></table></figure>

<p>配置编译插件：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">plugin</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>maven-compiler-plugin<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">version</span>&gt;</span>3.1<span class="tag">&lt;/<span class="name">version</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">configuration</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">source</span>&gt;</span>11<span class="tag">&lt;/<span class="name">source</span>&gt;</span> <span class="comment">&lt;!-- 所使用的JDK版本 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">target</span>&gt;</span>11<span class="tag">&lt;/<span class="name">target</span>&gt;</span> <span class="comment">&lt;!-- 目标字节码运行的JRE版本 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">configuration</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">plugin</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>打包</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvn clean package <span class="comment"># 对项目进行打包</span></span><br></pre></td></tr></table></figure>

<p>如果要打可执行JAR文件，则需要在配置文件中写明使用<code>maven-shade-plugin</code>插件并进行配置：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">plugin</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.apache.maven.plugins<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>maven-shade-plugin<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">version</span>&gt;</span>3.1.1<span class="tag">&lt;/<span class="name">version</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">executions</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">execution</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">phase</span>&gt;</span>package<span class="tag">&lt;/<span class="name">phase</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">goals</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">goal</span>&gt;</span>shade<span class="tag">&lt;/<span class="name">goal</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">goals</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">configuration</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">transformer</span> <span class="attr">implementation</span>=<span class="string">"org.apache.maven.plugins.shade.resource.ManifestResourceTransformer"</span>&gt;</span></span><br><span class="line">                    <span class="comment">&lt;!-- 指定主类 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">mainClass</span>&gt;</span>demo.Test<span class="tag">&lt;/<span class="name">mainClass</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">transformer</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">configuration</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">execution</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">executions</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">plugin</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>运行</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvn <span class="built_in">exec</span>:java -Dexec.mainClass=<span class="string">"xxx"</span> <span class="comment"># xxx为主类的全限定名</span></span><br></pre></td></tr></table></figure>

<ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvn clean install <span class="comment"># 安装项目</span></span><br></pre></td></tr></table></figure>

<ul>
<li>测试</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mvn <span class="built_in">test</span></span><br></pre></td></tr></table></figure>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/maven-cmd/" data-id="ckpb8zvkc001sdsvlenjp1o6v" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/maven/" rel="tag">maven</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-theia" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/theia/" class="article-date">
  <time datetime="2021-01-19T14:05:05.000Z" itemprop="datePublished">2021-01-19</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/theia/">theia安装与使用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="docker启动"><a href="#docker启动" class="headerlink" title="docker启动"></a>docker启动</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">docker run -it --init -p 3000:3000 -v <span class="string">"<span class="variable">$(pwd)</span>:/xxx"</span> theiaide/theia:next <span class="comment"># linux/macOS/PowerShell</span></span><br><span class="line">docker run -it --init -p 3000:3000 -v <span class="string">"%cd%:/xxx"</span> theiaide/theia:next <span class="comment"># cmd.exe</span></span><br></pre></td></tr></table></figure>

<p>浏览器输入<code>localhost:3000</code>即可打开theia。</p>
<p>有关docker的一些操作见文章<a href="docker">Docker安装与初次运行</a></p>
<h2 id="本地安装"><a href="#本地安装" class="headerlink" title="本地安装"></a>本地安装</h2><ol>
<li>创建项目</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">mkdir my-theia</span><br><span class="line"><span class="built_in">cd</span> my-theia</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>创建<code>package.json</code>文件</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"name"</span>: <span class="string">"My Cool IDE"</span>,</span><br><span class="line">    <span class="attr">"dependencies"</span>: &#123;</span><br><span class="line">        <span class="attr">"@theia/callhierarchy"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/file-search"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/git"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/markers"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/messages"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/mini-browser"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/navigator"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/outline-view"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/plugin-ext-vscode"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/preferences"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/preview"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/search-in-workspace"</span>: <span class="string">"next"</span>,</span><br><span class="line">        <span class="attr">"@theia/terminal"</span>: <span class="string">"next"</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">"devDependencies"</span>: &#123;</span><br><span class="line">        <span class="attr">"@theia/cli"</span>: <span class="string">"next"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>安装依赖</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn</span><br><span class="line"><span class="comment"># or</span></span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>构建项目</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn theia build</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>运行theia IDE</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn theia start <span class="comment"># 直接运行</span></span><br></pre></td></tr></table></figure>

<ol start="6">
<li>封装npm scripts</li>
</ol>
<p>在<code>package.json</code>中添加：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">        <span class="attr">"start"</span>: <span class="string">"theia start"</span>,</span><br><span class="line">        <span class="attr">"build"</span>: <span class="string">"theia build"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="7">
<li>安装插件</li>
</ol>
<p>更新<code>package.json</code>：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">        <span class="attr">"prepare"</span>: <span class="string">"yarn run clean &amp;&amp; yarn build &amp;&amp; yarn run download:plugins"</span>,</span><br><span class="line">        <span class="attr">"clean"</span>: <span class="string">"theia clean"</span>,</span><br><span class="line">        <span class="attr">"build"</span>: <span class="string">"theia build --mode development"</span>,</span><br><span class="line">        <span class="attr">"start"</span>: <span class="string">"theia start --plugins=local-dir:plugins"</span>,</span><br><span class="line">        <span class="attr">"download:plugins"</span>: <span class="string">"theia download:plugins"</span></span><br><span class="line">    &#125;, </span><br><span class="line">    <span class="attr">"theiaPluginsDir"</span>: <span class="string">"plugins"</span>, <span class="comment">// 插件存放地址</span></span><br><span class="line">    <span class="attr">"theiaPlugins"</span>: &#123; <span class="comment">// 欲安装之插件</span></span><br><span class="line">        <span class="attr">"vscode-builtin-css"</span>: <span class="string">"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-pre1/css-1.39.1-pre1.vsix"</span>,</span><br><span class="line">        <span class="attr">"vscode-builtin-html"</span>: <span class="string">"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-pre1/html-1.39.1-pre1.vsix"</span>,</span><br><span class="line">        <span class="attr">"vscode-builtin-javascript"</span>: <span class="string">"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-pre1/javascript-1.39.1-pre1.vsix"</span>,</span><br><span class="line">        <span class="attr">"vscode-builtin-json"</span>: <span class="string">"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-pre1/json-1.39.1-pre1.vsix"</span>,</span><br><span class="line">        <span class="attr">"vscode-builtin-markdown"</span>: <span class="string">"https://github.com/theia-ide/vscode-builtin-extensions/releases/download/v1.39.1-pre1/markdown-1.39.1-pre1.vsix"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>运行命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">yarn prepare <span class="comment"># 准备环境</span></span><br><span class="line">yarn start <span class="comment"># 启动IDE</span></span><br></pre></td></tr></table></figure>

<ol start="8">
<li>打包桌面应用</li>
</ol>
<p>参考repo: <a href="https://github.com/theia-ide/yangster-electron" target="_blank" rel="noopener">theia-ide/yangster-electron</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/theia/" data-id="ckpb8zvky002vdsvlbz05fo95" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/theia/" rel="tag">theia</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-ubuntu-fcitx-jetbrain" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/ubuntu-fcitx-jetbrain/" class="article-date">
  <time datetime="2020-11-03T14:58:59.000Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/ubuntu-fcitx-jetbrain/">解决jetbrain系产品在fcitx输入法下的中文输入问题</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>在启动脚本(诸如<code>idea.sh</code>, <code>studio.sh</code>等 )添加环境变量：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 启动脚本前半部分</span></span><br><span class="line"><span class="comment"># ...</span></span><br><span class="line"></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$IDE_HOME</span>/lib/bootstrap.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/extensions.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/util.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/jdom.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/log4j.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/trove4j.jar"</span></span><br><span class="line">CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$IDE_HOME</span>/lib/jna.jar"</span></span><br><span class="line"><span class="keyword">if</span> [ -n <span class="string">"<span class="variable">$PYCHARM_CLASSPATH</span>"</span> ]; <span class="keyword">then</span></span><br><span class="line">  CLASSPATH=<span class="string">"<span class="variable">$CLASSPATH</span>:<span class="variable">$PYCHARM_CLASSPATH</span>"</span></span><br><span class="line"><span class="keyword">fi</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">export</span> CLASSPATH</span><br><span class="line"></span><br><span class="line">LD_LIBRARY_PATH=<span class="string">"<span class="variable">$IDE_BIN_HOME</span>:<span class="variable">$LD_LIBRARY_PATH</span>"</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意必须加在这个地方，否则无效</span></span><br><span class="line"><span class="built_in">export</span> LD_LIBRARY_PATH</span><br><span class="line"><span class="built_in">export</span> GTK_IM_MODULE=fcitx</span><br><span class="line"><span class="built_in">export</span> QT_IM_MODULE=fcitx</span><br><span class="line"><span class="built_in">export</span> XMODIFIERS=@im=fcitx</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment"># ---------------------------------------------------------------------</span></span><br><span class="line"><span class="comment"># Run the IDE.</span></span><br><span class="line"><span class="comment"># ---------------------------------------------------------------------</span></span><br><span class="line">IFS=<span class="string">"<span class="variable">$(printf '\n\t')</span>"</span></span><br><span class="line">LD_LIBRARY_PATH=<span class="string">"<span class="variable">$IDE_BIN_HOME</span>:<span class="variable">$LD_LIBRARY_PATH</span>"</span> <span class="string">"<span class="variable">$JAVA_BIN</span>"</span> \</span><br><span class="line">  <span class="variable">$&#123;AGENT&#125;</span> \</span><br><span class="line">  <span class="string">"-Xbootclasspath/a:<span class="variable">$IDE_HOME</span>/lib/boot.jar"</span> \</span><br><span class="line">  -classpath <span class="string">"<span class="variable">$CLASSPATH</span>"</span> \</span><br><span class="line">  <span class="variable">$&#123;VM_OPTIONS&#125;</span> \</span><br><span class="line">  <span class="string">"-XX:ErrorFile=<span class="variable">$HOME</span>/java_error_in_PYCHARM_%p.log"</span> \</span><br><span class="line">  <span class="string">"-XX:HeapDumpPath=<span class="variable">$HOME</span>/java_error_in_PYCHARM.hprof"</span> \</span><br><span class="line">  -Didea.paths.selector=PyCharm2017.1 \</span><br><span class="line">  <span class="string">"-Djb.vmOptionsFile=<span class="variable">$VM_OPTIONS_FILE</span>"</span> \</span><br><span class="line">  <span class="variable">$&#123;IDE_PROPERTIES_PROPERTY&#125;</span> \</span><br><span class="line">  -Didea.platform.prefix=Python \</span><br><span class="line">  com.intellij.idea.Main \</span><br><span class="line">  <span class="string">"<span class="variable">$@</span>"</span></span><br></pre></td></tr></table></figure>

<p>添加完事后，重新启动IDE生效。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/ubuntu-fcitx-jetbrain/" data-id="ckpb8zvkt002odsvlgc9t47t3" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/linux/" rel="tag">linux</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-ubuntu-fcitx-wps" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/ubuntu-fcitx-wps/" class="article-date">
  <time datetime="2020-10-31T23:29:30.000Z" itemprop="datePublished">2020-10-31</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/ubuntu-fcitx-wps/">WPS for Linux 无法使用fcitx中文输入法问题的解决方案</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>第一次遇到在这个问题，系统是Lubuntu 20.04。</p>
<h2 id="现象"><a href="#现象" class="headerlink" title="现象"></a>现象</h2><p>只能输入英文，按下Shift尝试切换输入法没有反应</p>
<h2 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h2><p>编辑如下文件<br><code>/usr/bin/wps</code><br><code>/usr/bin/et</code><br><code>/usr/bin/wpp</code><br>分别对应wps word、excel、powerpoint，修改每个文件，加入如下代码并保存</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">export</span> XMODIFIERS=<span class="string">"@im=fcitx"</span></span><br><span class="line"><span class="built_in">export</span> QT_IM_MODULE=<span class="string">"fcitx"</span></span><br></pre></td></tr></table></figure>

<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul>
<li><a href="https://www.dazhuanlan.com/2019/07/28/linux-mint下wps中调用fcitx失灵问题/" target="_blank" rel="noopener">Linux Mint下WPS中调用fcitx失灵问题</a></li>
<li><a href="https://www.cnblogs.com/zbqhc/p/12416211.html" target="_blank" rel="noopener">WPS for Linux 无法使用fcitx中文输入法问题的解决方案</a></li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/ubuntu-fcitx-wps/" data-id="ckpb8zvkv002qdsvl4gosgnk7" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/linux/" rel="tag">linux</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/2/">&amp;laquo; 上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="page-number" href="/page/5/">5</a><span class="space">&hellip;</span><a class="page-number" href="/page/13/">13</a><a class="extend next" rel="next" href="/page/4/">下一页 &amp;raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/" rel="tag">android</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/data-structure/" rel="tag">data structure</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/" rel="tag">docker</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/" rel="tag">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/go/" rel="tag">go</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/" rel="tag">java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/json/" rel="tag">json</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/linux/" rel="tag">linux</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/maven/" rel="tag">maven</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/" rel="tag">mybatis</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/" rel="tag">mysql</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/network/" rel="tag">network</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/" rel="tag">nginx</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/" rel="tag">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/searching/" rel="tag">searching</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/sorting/" rel="tag">sorting</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/sublime-text/" rel="tag">sublime text</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/termux/" rel="tag">termux</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/theia/" rel="tag">theia</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/typora/" rel="tag">typora</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vala/" rel="tag">vala</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vim/" rel="tag">vim</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue/" rel="tag">vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/zig/" rel="tag">zig</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/zookeeper/" rel="tag">zookeeper</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云</h3>
    <div class="widget tagcloud">
      <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/data-structure/" style="font-size: 10px;">data structure</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/git/" style="font-size: 15px;">git</a> <a href="/tags/go/" style="font-size: 10px;">go</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/java/" style="font-size: 18.33px;">java</a> <a href="/tags/javascript/" style="font-size: 11.67px;">javascript</a> <a href="/tags/json/" style="font-size: 10px;">json</a> <a href="/tags/linux/" style="font-size: 20px;">linux</a> <a href="/tags/maven/" style="font-size: 10px;">maven</a> <a href="/tags/mybatis/" style="font-size: 10px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 11.67px;">mysql</a> <a href="/tags/network/" style="font-size: 11.67px;">network</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/nodejs/" style="font-size: 13.33px;">nodejs</a> <a href="/tags/searching/" style="font-size: 10px;">searching</a> <a href="/tags/sorting/" style="font-size: 16.67px;">sorting</a> <a href="/tags/sublime-text/" style="font-size: 10px;">sublime text</a> <a href="/tags/termux/" style="font-size: 10px;">termux</a> <a href="/tags/theia/" style="font-size: 10px;">theia</a> <a href="/tags/typora/" style="font-size: 10px;">typora</a> <a href="/tags/vala/" style="font-size: 10px;">vala</a> <a href="/tags/vim/" style="font-size: 15px;">vim</a> <a href="/tags/vue/" style="font-size: 11.67px;">vue</a> <a href="/tags/zig/" style="font-size: 10px;">zig</a> <a href="/tags/zookeeper/" style="font-size: 10px;">zookeeper</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/05/">五月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/04/">四月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/03/">三月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/01/">一月 2021</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/11/">十一月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/10/">十月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/08/">八月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/07/">七月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">六月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/java-hashmap/">java.util.HashMap</a>
          </li>
        
          <li>
            <a href="/jvm/">JVM</a>
          </li>
        
          <li>
            <a href="/java-locks/">Java锁</a>
          </li>
        
          <li>
            <a href="/java-references/">Java引用</a>
          </li>
        
          <li>
            <a href="/gitea/">Gitea</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 Alanisia<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>